import React, { memo, useState } from 'react';

import { Carousel } from 'antd';
import Rating from '@mui/material/Rating';
const homeCard = memo((props) => {
  let { item } = props;

  let [value, setValue] = useState<number | null>(2);
  return (
    <div className="card cursor-pointer">
      <Carousel arrows={true} infinite={false}>
        {[1, 2, 3].map((num) => (
          <img
            key={num}
            src={item.picture_url || 'https://z1.muscache.cn/im/pictures/ecdf8378-0c60-4aa4-a28b-50961b48534b.jpg?im_w=720'}
            alt="图片"
            className="object-cover rounded-md h-[250px] w-[100%]"
          />
        ))}
      </Carousel>

      <p className="text-[16px] my-2 font-bold text text-ellipsis text-nowrap overflow-hidden">{item.name}</p>
      <p>{item.price} /每晚</p>
      <p>已订满</p>

      <div className="flex items-center">
        <Rating name="read-only" readOnly value={item.star_rating || 1} size="small" />
        <p className="ml-2"> {item.bottom_info?.content || ' '}</p>
      </div>
    </div>
  );
});

export default homeCard;
